前端项目微金所2

阅读量：6428 次

发布时间：2019-06-23

本文共 8428 字，大约阅读时间需要 28 分钟。

前端项目笔记2

1.搭建Bootstrap页面骨架及项目目录结构

├─ /weijinsuo/ ··················· 项目所在目录└─┬─ /css/ ······················· 我们自己的CSS文件  ├─ /font/ ······················ 使用到的字体文件  ├─ /img/ ······················· 使用到的图片文件  ├─ /js/ ························ 自己写的JS脚步  ├─ /lib/ ······················· 从第三方下载回来的库【只用不改】  ├─ /favicon.ico ················ 站点图标  └─ /index.html ················· 入口文件

1.1.约定编码规范

1.1.1.HTML约定

在head中引入必要的CSS文件,优先引用第三方的CSS,方便我们自己的样式覆盖

在body末尾引入必要的JS文件,优先引用第三方的JS,注意JS文件之间的依赖关系,比如bootstrap.js依赖于jQuery,那就应该先引用jQuery.js 然后引用bootstrap.js

1.1.2.CSS约定

除了公共级别样式,其余样式全部有模块前缀(权重尽量写满)

尽量使用直接子代选择器, 少用间接子代避免错杀

1.2.HTML5文档结构

  
      页面标题

1.3.Viewport设置

html中插入视口设置,可以通过emmet meta:vp 插入

1.4.浏览器兼容模式

html中插入兼容模式设置,可以通过emmet meta:compat 插入

1.5.favicon(站点图标)

html中插入图标链接,可以通过emmet link:favicon 插入

1.6.引入相应的第三方文件

...

1.7.在我们默认的样式表中将默认字体设置为:

body{  font-family: "Helvetica Neue",                 Helvetica,                 Microsoft Yahei,                 Hiragino Sans GB,                 WenQuanYi Micro Hei,                 sans-serif;}

2.完成页面空结构

先划分好页面中的大容器,然后在具体看每一个容器中单独的情况,代码中的注释的格式也要学习下哦

3.构建顶部通栏

3.1.container类

用语定义一个固定宽度且居中的版心

3.2.栅格系统

Bootstrap中定义了一套响应式的网格系统

其使用方式就是将一个容器划分成12列

然后通过col-xx-xx的类名控制每一列的占比

3.2.1.row类

因为每一列默认有一个15px的左右外边距

row类的一个作用就是通过左右-15px屏蔽掉这个边距

3.2.2.col-XX-XX类

col-xs-[列数]: 在超小屏幕下展示几份

col-sm-[列数]: 在小屏幕下展示几份

col-md-[列数]: 在中等屏幕下展示几份

col-lg-[列数]: 在大屏幕下展示几份

xs :超小屏幕手机 (<768px)

sm :小屏幕平板 (da768px)

md :中等屏幕桌面显示器 (<768px)

lg :大屏幕大桌面显示器 (<768px)

此处顶部通栏已经被划分为四列
text-center的作用就是让内部内容居中显示

3.2.字体图标

@font-face {  font-family: 'weijinsuo';  src: url('../font/MiFie-Web-Font.eot') format('embedded-opentype'),   url('../font/MiFie-Web-Font.svg') format('svg'),   url('../font/MiFie-Web-Font.ttf') format('truetype'),   url('../font/MiFie-Web-Font.woff') format('woff');}[class^="icon-"],[class*=" icon-"] {  /*注意上面选择器中间的空格*/  /*我们使用的名为itcast的字体就是上面的@font-face的方式声明的*/  font-family: weijinsuo;  font-style: normal;}.icon-mobilephone::before{  content: '\e908';}


      
             手机微金所

文字文件格式

eot : embedded-opentype

svg : svg

tff : truetype

woff : woff

3.4.hover图片展示

.mobile-link:hover > img {  display: block;}

3.5.按钮样式生成

http://blog.koalite.com/bbg/

可以通过界面生成一个新的按钮样式

.btn-itcast {  color: #ffffff;  background-color: #E92322;  border-color: #DB3B43;}.btn-itcast:hover,.btn-itcast:focus,.btn-itcast:active,.btn-itcast.active,.open .dropdown-toggle.btn-itcast {  color: #ffffff;  background-color: #E92322;  border-color: #DB3B43;}.btn-itcast:active,.btn-itcast.active,.open .dropdown-toggle.btn-itcast {  background-image: none;}.btn-itcast.disabled,.btn-itcast[disabled],fieldset[disabled] .btn-itcast,.btn-itcast.disabled:hover,.btn-itcast[disabled]:hover,fieldset[disabled] .btn-itcast:hover,.btn-itcast.disabled:focus,.btn-itcast[disabled]:focus,fieldset[disabled] .btn-itcast:focus,.btn-itcast.disabled:active,.btn-itcast[disabled]:active,fieldset[disabled] .btn-itcast:active,.btn-itcast.disabled.active,.btn-itcast[disabled].active,fieldset[disabled] .btn-itcast.active {  background-color: #E92322;  border-color: #DB3B43;}.btn-itcast .badge {  color: #E92322;  background-color: #ffffff;}

3.5.小屏幕隐藏

或者

hidden-xx : 在某种屏幕下隐藏
visible-xx : 在某种屏幕尺寸下显示

4.导航通栏

在使用了Bootstrap过后,大多数界面元素都是通过Bootstrap提供好的界面组件修改得来

4.1.Bootstrap扩展

通过Bootstrap文档对导航条样式的设置发现,其本身是有一个类似于主题的概念

navbar-default: 默认的外观

所以我们希望可以通过自定义一套完成的风格
- navbar-weijinsuo

.navbar-weijinsuo{  ...}...具体代码参考navbar-default实现即可,根据自己的实际要求修改外观

4.2.品牌logo

仍然使用字体图标

4.3.菜单行高调整

默认样式中菜单的行高为20px,我们可以调整为自己想要的高度

一般都是通过自己的样式去覆盖

5.轮播图

5.1.Bootstrap JS插件使用

对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中
然后做出相应的样式调整

5.1.1.Bootstrap中轮播图插件叫做Carousel

5.1.2.基本的轮播图实现

5.1.3.由于轮播图片超宽造成的影响

美工为了在不同屏幕下更好的展示将图片两边做的非常宽,但是我们大多数情况的页面宽度都无法满足这样的图片宽度

而且Bootstrap的样式中默认将图片的max-width设置为100%

造成界面图片缩放

想在一个较小的屏幕下展示一个超宽的图片,并让图片居中显示
- 两种办法:
  - 换用背景图的方式,background-position : center center;
  - 使img元素绝对定位,left:50%,margin-left: -width/2

5.2.background使用

将容器的高度固定(410px)

将轮播图改为北京显示

由于可能图片的高度不一定是410px

所以设置CSS3中的background-size

5.2.1.background-size 的四个取值

length
- 如background-size: 100px 100px,将背景图固定到多大尺寸

percentage
- 如 background-size: 90% 90%,一百分比的形式设置背景大小

cover
- 1.背景图片等比例缩放
- 2.让背景图相对较小边放大到目标容器大小结束
  - 如: 一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是300*600
  - 因为背景图的较小边为100,将100放大到目标容器300的宽度,放大了3倍,最终结果300*\600

contain
- 1.背景图片等比例缩放
- 2.让背景图相对较大边放大到目标容器大小结束
  - 如: 一张100*200的背景图放到一个300*400的盒子中,最终背景图片的大小是200*400
  - 因为背景图较大边为200,将200放大到目标容器400的高度,放大了2倍,最终结果200*400

图文说明

cover

contain

5.3.图片响应式

目的
- 各种终端都需要正常显示图片
- 移动端应该使用更小(体积)的图片

实现方式
- 将元素中直接设置的图片背景删除,换成两个data-属性 (如: data-img-sm="小图路径",data-img-lg="大图路径")
- 通过JS的方式获取屏幕的宽度;
- 判断屏幕宽度是否小于一定的值(如: 768)
- 根据从判断情况决定使用具体的大图还是小图

$(function() {    $(window).on("resize", resize).triggerHandler("resize");    /**     * 屏幕宽度改变触发的方法     * @return {[type]} [description]     */    function resize() {        // 获取屏幕宽度        var windowW = $(window).width();        var isSmallScreen = windowW < 768;        // 遍历轮播图片        $("#weijinsuo_ad > .carousel-inner > .item").each(function(i, ele) {            // ele是DOM对象,所以需要转换            var $ele = $(ele);            console.log($ele.data("img-sm"));            var imgURL = isSmallScreen ? "url(" + $ele.data("img-sm") + ")" : "url(" + $ele.data("img-lg") + ")";            // 设置背景图片            $ele.css("backgroundImage", imgURL);            if (isSmallScreen) { // 小屏幕不用背景图,直接用img                $ele.html('');            } else {                $ele.empty();            }        });    }    /**     * 初始化Bootstrap中的提示框效果     * @type {String}     */    $('[data-toggle="tooltip"]').tooltip();});

5.4.window resize事件

由于上一步我们实现的过程是指在页面加载完成判断一次,

当用户手动调整页面宽度过后没有及时发生变化,

所以我们可以通过window的resize事件中重新完成以上操作来解决这个问题

function 窗口变化后执行的函数名(){  // 具体的操作}$(window).on('resize', 窗口变化后执行的函数名);

这个事件只会在窗口尺寸发生变化后执行,但是我们需要一开始时执行一次

...$(window).on('resize', 窗口变化后执行的函数名).triggerHandler('resize');

5.5.小图片不需要使用背景的方式

小图如果还是使用背景图片的方式,当屏幕特别小时,效果很差

所以当使用小图,改用img的方式

// 因为我们需要小图时 尺寸等比例变化，所以小图时我们使用img方式if (isSmallScreen) {  $item.html('');} else {  $item.empty();}

按照目前的情况,如果是小图展示则不需要给容器加上410px的固定高度

所以我们必须通过CSS媒体查询的方式解决

#weijinsuo_ad > .carousel-inner > .item {    background-repeat: no-repeat;    background-position: center center;    -webkit-background-size: cover;    background-size: cover;}@media screen and (min-width: 768px) {    #weijinsuo_ad > .carousel-inner > .item {        height: 410px;    }}#weijinsuo_ad > .carousel-inner > .item > img {    width: 100%;}

6.网站特性

6.1.网格系统

该板块当屏幕为中等尺寸时分为3列,较小屏幕是分为2列

所以使用网络系统划分

6.2.媒体对象样式

每一个小块的样式可以通过Bootstrap中的媒体对象样式实现

  
         
            
           
      
    
            
       支付交易保障
      
       银联支付全称保证支付安全

6.3.响应式辅助类型

整个板块在超小屏幕下是隐藏起来的
- 只需要给当前板块加上hidden-xs的class

7.预约投标

7.1.pull-left

左边文字段落

7.2.pull-right

右边文字段落

8.投资产品

8.1.Tab选项卡

选项卡功能可以通过Bootstrap中提供的相应组件实现
http://v3.bootcss.com/javascript/#tabs

8.2.网格系统

和网站特色板块的网格系统定义一样

8.3.::before ::after

.panel-czbk > .panel-heading::before,.panel-czbk > .panel-heading::after {  content: ' ';  width: 16px;  height: 16px;  border-radius: 8px;  background-color: #f0f0f0;  position: absolute;}.panel-czbk > .panel-heading::before {  top: -8px;  left: -8px;}.panel-czbk > .panel-heading::after {  bottom: -8px;  left: -8px;  box-shadow: 0 2px 1px #ccc inset;}